<template>
  <div>
    <el-form-item label="危废生产">
      <el-radio-group v-model="value.hwStatus" :disabled="disabled" @input="handleChange">
        <el-radio v-for="item in dict.type.env_system_has_or_not" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="value.hwStatus === '有'">
      <el-form-item label="危废仓库面积">
        <el-input v-model="value.hwArea" :disabled="disabled" class="input" placeholder="请输入仓库面积" @change="handleChange" />m2
      </el-form-item>

      <table class="pars-table" style="width: 1000px">
        <thead>
          <tr>
            <th>危废代码</th>
            <th>危废名称</th>
            <th>数量（吨）</th>
            <th>合同签署情况</th>
            <th>到期时间</th>
            <th v-if="!disabled" class="operation">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in data" :key="row.id">
            <th>
              <el-select
                v-model="row.hwCode"
                :disabled="disabled"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                @change="handleChange"
              >
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.title"
                  :value="item.hwCode"
                />
              </el-select>
            </th>
            <th>
              <el-input v-model="row.hwName" :disabled="disabled" placeholder="请输入危废名称" @change="handleChange" />
            </th>
            <th>
              <el-input v-model="row.hwNum" :disabled="disabled" placeholder="数量" @change="handleChange" />
            </th>
            <th>
              <el-select v-model="row.status" :disabled="disabled" placeholder="请选择" @change="handleChange">
                <el-option
                  v-for="dict in dict.type.env_contract_sign_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </th>
            <th>
              <el-date-picker
                v-model="row.deadline"
                :disabled="disabled"
                type="date"
                format="yyyy年MM月dd日"
                placeholder="选择时间"
                @change="handleChange"
              />
            </th>
            <th v-if="!disabled">
              <i class="el-icon-remove icon remove" @click="handleRemove(index)" />
              <i class="el-icon-circle-plus icon add" @click="handleAdd(index)" />
            </th>
          </tr>
        </tbody>
      </table>
    </template>
  </div>
</template>
<script>
import { parSettingMixin } from '@/utils/mixins'
import { formatDatetime } from '@/utils'
import { searchHwCode } from '@/api/task/task'

export default {
  name: 'WasteProduct',
  mixins: [parSettingMixin],
  dicts: ['env_system_has_or_not', 'env_contract_sign_status'],
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data: this.value && this.value.hwItems && this.value.hwItems.length > 0
        ? this.value.hwItems
        : [{ hwCode: '', hwName: '', hwNum: '', status: '', deadline: '' }],
      keys: ['hwCode', 'hwName', 'hwNum', 'status', 'deadline'],

      loading: false,
      list: []
    }
  },
  watch: {
    value(val) {
      this.data = val && val.hwItems && val.hwItems.length > 0 ? val.hwItems : [this.getEmptyRow()]
    }
  },
  methods: {
    handleChange() {
      const data = {
        ...this.value,
        hwItems: this.data.map(item => {
          if (item.deadline) item.deadline = formatDatetime(item.deadline, 'YYYY-MM-DDTHH:mm:ss')
          return item
        })
      }
      this.$emit('input', data)
      this.$emit('change', data)
    },
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        const params = {
          pageNum: 1, pageSize: 1000, keyWord: query
        }
        const { data } = await searchHwCode(params)
        this.loading = false
        this.list = (data.records || []).map(item => ({
          ...item,
          title: `${item.hwCode}(${item.hwName})`
        }))
      } else {
        this.list = []
      }
    }
  }
}
</script>
